import React, {Component} from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'

// npm install --save axios   运行时需要


/*
* 法送请求都要更新Main里面的状态
* */
export default class Main extends Component{


     /*
     * 从父组件App接受到的输入框的参数
     * */
     static propTypes = {
        searchName: PropTypes.string.isRequired
    }

    /*
    * 有四种状态
    * */
    state = {
        initView: true, // 初始化时  显示提示输入
        loading: false, // 等待阶段就在加载进行搜索
        users: null,    // 展示用户列表
        errorMsg:null,  // 异常显示错误信息
    }

    /*生命周期函数*/
    // 当组件接受到新的属性时就会调用这个函数
    componentWillReceiveProps(newProps) {  // 指定了新的搜索关键, 需要请求
        const {searchName} = newProps  // 需要请求
        // 在准备发送请求之前先要更新状态 (将初识化状态  ==>>   请求中状态)
        this.setState({
            initView: false,
            loading: true
        })
        // 发ajax请求
        const url = `https://api.github.com/search/users?q=${searchName}`
        axios.get(url).then(response =>{
            // 成功返回数据   得到响应的数据
            const result = response.data
            console.log(result)


            // 封装数据
            // 注意自己定义的属性名跟接受的参数是不一致的
            // 使用map() 方法  --  根据一个数组生成一个新的数组
            // {} 外面要有一个()  否则返回的就是函数体
            // 加了() 返回的就是函数
            // const users = result.items.map(item => ({name:item.login}))
            // 或者使用下面的return的写法
            const users = result.items.map(item => {
                return {name:item.login, url:item.html_url, avatarUrl:item.avatar_url}
            })

            // 更新状态(成功)
            this.setState({
                loading:false,
                users:users
            })

        }).catch(error => {
            // 更新状态(失败)
             this.setState({
                loading: false,
                errorMsg: error.message
            })
        })
    }



    /*发送异步请求
    * 需要根据更新了的  searchName  去发送异步请求
    *
    * */




    render() {
        const {initView, loading, users, errorMsg} = this.state
        const {searchName} = this.props
        console.log('render()', searchName)
        if (initView) {
            return <h2>请输入搜索关键字: {searchName}</h2>
        } else if (loading) {
            return <h2>正在请求中</h2>
        } else if (errorMsg) {
            return <h2>{errorMsg}</h2>
        } else {
            return (
                <div className="row">
                    {
                        // =>  不使用{}  而是直接使用()  这样可以不用写return
                        users.map((user,index) => (
                           <div className="card" key={index}>
                            <a href={user.url} target="_blank">
                                <img src={user.avatarUrl} style={{width: 100}}/>
                            </a>
                            <p className="card-text">{user.name}</p>
                           </div>
                        ))
                    }

                </div>
            )
        }
    }
}

